
<template>
  <div>
    <div class="nav-pc">
      <div style="display:flex">
        <div class="nav-pc-logo">
          <img src="../../../assets/images/logo.svg" alt="logo">
          <h1 class="kaiti">云笔记</h1>
        </div>
        <ul class="nav-pc-menu">
          <li
            v-for="(item) in props.list" 
            :key="item.id"
            :class="item.menuType == '1'?'active':''"
            @click="topMenuTo(item)">
            <NuxtLink :to="item.menuRouter">
              {{item.menuTitle}}
            </NuxtLink>
          </li>
        </ul>
      </div>
      <div class="nav-pc-search">
        <n-input
          placeholder="查找文章"
          size="small">
          <template #suffix>
            <n-icon :component="SearchOutline" />
          </template>
        </n-input>
      </div>
      <div class="nav-pc-login">
        <n-button 
          size="small" 
          strong 
          secondary 
          type="success"
          @click="Login">
          登录 | 注册
        </n-button>
      </div>

    </div>
    <n-modal v-model:show="showModal">
      <n-card
        style="width: 600px"
        title=""
        :bordered="false"
        size="huge"
        role="dialog"
        aria-modal="true"
      >
        <LazyLogin />
      </n-card>
    </n-modal>
  </div>
</template>

<script setup lang="ts">
import { SearchOutline } from '@vicons/ionicons5'
import { reactive,ref } from 'vue'
const props = defineProps({
  list: {
    type: Array,
    required: true
  }
})
console.log(props.list)
interface listType {
  id: string,
  menuTitle: string,
  menuType: string,
  menuIcon: string,
  menuRouter: string
}
let showModal = ref(false)


const topMenuTo = (item:any) => {
  // list.value = list.value.map(i =>{
  //   if(i.id == item.id){
  //     i.menuType = '1'
  //   } else {
  //     i.menuType = '0'
  //   }
  //   return i
  // })
}
const Login = () => {
  showModal.value = true
}


</script>

<style scoped lang="scss">
.nav-pc{
  width: 90%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left:0;
  padding: 0px 5%;
  height: 60px;
  background-color: #fff;
  box-shadow: 0 2px 8px $yun-layer-3-fill;
  &-logo{
    display: flex;
    align-items: center;
    img{
      width: 30px;
      height: 30px;
    }
    h1{
      font-size:26px;
      margin-left: 10px;
    }
  }
  &-menu{
    display: flex;
    align-items: center;
    height: 60px;
    li{
      height: 58px;
      margin-left: 20px;
      display: flex;
      align-items: center;
      cursor: pointer;
      border-bottom: 2px solid transparent;
      font-size:14px;
      
    }
    li:hover{
      border-bottom: 2px solid $yun-color;
      transition: all 1s linear;
    }
    li:link{
      color:$yun-color;
    }
  }
  &-search{
    margin-left:20px;
  }
  &-login{
    margin-left:20px;
  }
}
.active{
  color: $yun-color;
}

</style>